---
description: Learn how to use tab pages with Plasmo to create new tab views in your browser extension.
---

# Tab Pages

Tab Pages is a feature unique to the Plasmo framework. Unlike [Extension Pages](/framework/ext-pages), Tab Pages are just regular web pages shipped with your extension bundle. Extensions generally redirect to or open these pages programmatically, but you can link to them as well.

## Use Cases

- A page to show when a user first installs your extension.
- A dedicated page for authentication
- When you need a more elaborate routing setup

## Examples

- [with-tabs](https://github.com/PlasmoHQ/examples/tree/main/with-tabs)
- [rfc-182](https://github.com/PlasmoHQ/plasmo-test/tree/main/rfc/rfc-182-tabs)

## Usage

To add a tab:

1. Create a `tabs` folder in the source directory (project root or `src`)
2. Add a `.tsx` file such as `delta-flyer.tsx`
3. Export a default React component:

```tsx filename="tabs/delta-flyer.tsx"
function DeltaFlyerPage() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <h2>Delta Flyer Tab</h2>

      <p>This tab is only available on the Delta Flyer page.</p>
    </div>
  )
}

export default DeltaFlyerPage
```

Your tab page will be available under the `/tabs` path in the extension bundle. It will be accessible from the browser under the URL:

```
chrome-extension://<extension-id>/tabs/delta-flyer.html
```

![tab-pages](@screenshots/new-tab-example.png)
